<template>
    <el-form :model="butlerInfo" status-icon :rules="rules" ref="butlerInfo" label-width="100px" class="demo-ruleForm">
        <h2>编辑管家</h2>
        <el-form-item label="用户名" prop="butlerperson">
            <el-input type="text" v-model="butlerInfo.butlerperson" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="butlerphone">
            <el-input type="text" v-model="butlerInfo.butlerphone" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="管家地址" prop="butleraddress">
            <el-input type="text" v-model="butlerInfo.butleraddress" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="butlerstarttime">
            <el-date-picker
                v-model="butlerInfo.butlerstarttime"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="12:00:00">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="butlerendtime">
            <el-date-picker
                v-model="butlerInfo.butlerendtime"
                type="datetime"
                placeholder="选择结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="12:00:00"
                
                >
            </el-date-picker>
        </el-form-item>
        <el-form-item label="价格" prop="butlerprice">
            <el-input type="text" v-model="butlerInfo.butlerprice" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="管家状态" prop="butlerstatus">
            <el-select v-model="butlerInfo.butlerstatus" placeholder="请选择管家状态">
                <el-option disabled label="普通用户" :value="0"></el-option>
                <el-option label="管家会员" :value="1"></el-option>
                <el-option disabled label="会员过期" :value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('butlerInfo')">提交</el-button>
            <el-button  @click="backFrom">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {mapActions} from 'vuex'
 export default {
    data() {
        let queryInfo = this.$route.query;
        return {
            butlerInfo: {
                id:queryInfo.manageId,
                butlerperson: queryInfo.userName,
                butlerphone: queryInfo.mobileNo,
                butleraddress: queryInfo.address,
                butlerstarttime:new Date(queryInfo.startTime) ,
                butlerendtime: new Date(queryInfo.endTime),
                butlerprice: queryInfo.price,
                butlerstatus: Number(queryInfo.isManage)//解决el-option 刷新 显示 0,1,2 的问题，需要将类型转换为Number
            },
            rules:{
                butlerperson:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                butlerphone:[{required:true, message:'请输入手机号', trigger: 'blur'}],
                butleraddress:[{required:true, message:'请输入地址', trigger: 'blur'}],
                butlerstarttime:[{ required: true, message: '请选择开始时间', trigger: 'blur' }],
                butlerendtime:[{ required: true, message: '请选择结束时间', trigger: 'blur' }],
                butlerprice:[{ required: true, message: '请输入价格', trigger: 'blur' }],
                butlerstatus:[{ required: true, message: '请选择管家状态', trigger: 'blur' }]
            }
        };
    },
    methods: {
        ...mapActions({
            updateButlerInfo:'butlerModule/updateButlerInfo'
        }),
        backFrom(){
            this.$router.push('/butler');
        },
        submitForm(formName) {
            //将date()时间转换成 yyyy-mm-dd hh-mm-ss 格式
            let getFormatDate =function(time) { 
                let date = new Date(time); 
                let Str=date.getFullYear() + '-' + 
                ((date.getMonth() + 1).toString().length==1?'0'+(date.getMonth()+1):date.getMonth()+1) + '-' + 
                (date.getDate().toString().length==1?'0'+date.getDate():date.getDate() ) + ' ' + 
                (date.getHours().toString().length==1?'0'+date.getHours():date.getHours() )+ ':' + 
                (date.getMinutes().toString().length==1?'0'+date.getMinutes():date.getMinutes())+ ':' + 
                (date.getSeconds().toString().length==1?'0'+date.getSeconds():date.getSeconds()); 
                return Str; 
            }
            let startTime = getFormatDate(this.butlerInfo.butlerstarttime);
            let endTime = getFormatDate(this.butlerInfo.butlerendtime);
            let params = {
                        manageId : this.butlerInfo.id,
                        startTime : startTime,
                        endTime : endTime
                    }

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.updateButlerInfo(params).then((res) => {
                        if(res.status == 1){
                            const loading = this.$loading({
                                lock: true,
                                text: '添加成功',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            setTimeout(() => {
                                loading.close();
                                this.$router.push({path:'/butler'});
                                this.$store.dispatch('butlerModule/getButlerList');
                            }, 1000);
                        }
                    })  
                } else {
                    return false;
                }
            });
        }
    }
}

</script>

<style scoped>
     .demo-ruleForm{
         text-align: left;
    }
</style>

